<template>
  <div class="echart--box" :id="echartsId"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Echartslot",
  data() {
    return {
      myChart: null,
    };
  },
  computed: {
    echartsId() {
      return "echarts" + Math.random() * 100000;
    },
  },

  mounted() {
    window.addEventListener("resize", this.echartsResize);
  },

  methods: {
    drawChart(opt) {
      try {
        const dom = document.getElementById(this.echartsId);
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(dom);
        // 绘制图表
        this.myChart.setOption(opt);
      } catch (error) {
        console.log("drawChart error", error);
      }
    },
    //窗口resize
    echartsResize() {
      this.myChart.resize();
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.echartsResize);
  },
};
</script>

<style scoped>
.echart--box {
  width: 100%;
  height: 100%;
}
</style>
